<template>
  <div>
    <div v-for="(src, index) in srcList" :key="index" @click="click(src)">
      <pdf :src="src" ref="pdf" v-bind="$attrs" class="pdf"></pdf>
    </div>
    <el-dialog
      v-dialogDrag="maxScreen"
      title="预览"
      :visible.sync="visible"
      width="800px;"
      @closed="close"
      append-to-body
    >
      <pdf-viewer
        :src="dialogSrc"
        :startPage="startPage"
        :style="{ height: height, width: '100%' }"
      ></pdf-viewer>
    </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import pdfViewer from './viewer'
export default {
  components: {
    pdf,
    pdfViewer
  },
  props: {
    srcList: {
      type: Array,
      default: () => {
        return []
      }
    },
    startPage: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogSrc: '',
      visible: false,
      height: '500px'
    }
  },
  methods: {
    click(src) {
      this.dialogSrc = src
      this.visible = true
    },
    close() {
      this.dialogSrc = ''
    },
    maxScreen(a) {
      if (a) {
        this.height = '500px'
      } else {
        this.height = window.innerHeight - 65 + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf {
  cursor: pointer;
}
</style>